<template>
  <div>
    <dialog-diy
      ref="dialogDiy"
      title="操作记录"
      dialog-width="700px"
      :title-center="true"
    >
      <div v-loading="loading" style="overflow-y: auto; height: 50vh">
        <el-timeline :reverse="reverse">
          <el-timeline-item
            type="primary"
            v-for="(activity, index) in detailInfo.cmsChannelStateSteps"
            :key="index"
          >
            <div class="step-main">
              <div
                class="step-time"
                style="color: #000"
                v-if="activity.createTime"
              >
                {{ activity.createTime }}
              </div>
              <div class="step-state" style="color: #000">
                {{ activity.state }}
              </div>
              <div v-if="activity.state == '提交失败'" style="margin-top: 10px">
                <div style="font-size: 13px;">
                  失败原因：{{ detailInfo.refusedReason }}
                </div>
              </div>
              <div v-if="activity.state == '放款成功'" style="margin-top: 10px">
                <div style="font-size: 13px;">
                  放款金额：{{ detailInfo.loanMoney }}
                </div>
              </div>
              <div v-if="activity.state == '授信成功'" style="margin-top: 10px">
                <div style="font-size: 13px;">
                  授信金额：{{ detailInfo.creditMoney }}
                </div>
              </div>
              <div v-if="activity.state == '审批拒绝'" class="step-reson">
                {{ detailInfo.refusedReason }}
              </div>
              <!--              <div-->
              <!--                v-if="activity.state == '审批中'"-->
              <!--                style="margin-left: 20px; margin-top: 10px"-->
              <!--              >-->
              <!--                <div v-for="(activity, index) in detailInfo.approvalStateSteps">-->
              <!--                  <div class="step-main">-->
              <!--                    <div-->
              <!--                      class="step-time"-->
              <!--                      style="font-size: 13px;"-->
              <!--                      v-if="activity.createTime"-->
              <!--                    >-->
              <!--                      {{ activity.createTime }}-->
              <!--                    </div>-->
              <!--                    <div class="step-state" style="font-size: 13px;">-->
              <!--                      {{ activity.state }}-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
          </el-timeline-item>
        </el-timeline>
        <el-empty v-if="detailInfo.cmsChannelStateSteps.length == 0" />
      </div>
    </dialog-diy>
  </div>
</template>

<script>
import dialogDiy from "../../../../components/dialogDiy/index.vue";
import { getkeyikeDetail } from "../../../../api/incomingManagement";

export default {
  name: "stepDetail",
  components: {
    dialogDiy
  },
  data() {
    return {
      detailInfo: {},
      reverse: false,
      loading: false
    };
  },
  methods: {
    opendialog(v) {
      console.log("mmm");
      this.loading = true;
      getkeyikeDetail(v.orderNo)
        .then(res => {
          this.loading = false;
          this.detailInfo = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
      setTimeout(() => {
        this.$refs.dialogDiy.openlog();
      }, 200);
    }
  }
};
</script>

<style scoped lang="scss">
.step-main {
  padding: 5px;
  .step-time {
    padding: 2px;
  }
  .step-state {
    padding: 2px;
  }
  .step-reson {
    margin-top: 10px;
    color: red;
  }
}
</style>
